<template>
<div class="home-icon">
    <el-row justify="center">
        <el-col :span="6" class="grid-content bg-purple" v-for="item in list" :key="item.id">
            <el-button type="text" class="icon-btn">
                <i class="el-icon-edit"></i>
                <br>
                {{item.desc}}
            </el-button>
        </el-col>
    </el-row>
</div>
</template>

<script>
export default {
  data: function() {
    return {
      list: [
        {
          id: "001",
          imgUrl: "",
          desc: "desc1"
        },
        {
          id: "002",
          imgUrl: "",
          desc: "desc2"
        },
        {
          id: "003",
          imgUrl: "",
          desc: "desc3"
        },
        {
          id: "004",
          imgUrl: "",
          desc: "desc4"
        },
        {
          id: "005",
          imgUrl: "",
          desc: "desc5"
        },
        {
          id: "006",
          imgUrl: "",
          desc: "desc6"
        },
        {
          id: "007",
          imgUrl: "",
          desc: "desc7"
        },
        {
          id: "008",
          imgUrl: "",
          desc: "desc8"
        }
      ]
    };
  }
};
</script>

<style scoped>
.home-icon{
text-align: center
}
.icon-btn {
  background-size: cover;
  border: 1px;
  border-color: rebeccapurple;
}
</style>


